<template>
    <div class="steps">
        <div
            class="steps-item"
            :class="{ 'is-active': item.steps <= active }"
            v-for="(item, index) in arrs"
            :key="index"
            @click.stop="onClick(item, index)"
        >
            <div class="steps-item-sub">{{ index + 1 }}.{{ item.text }}</div>
        </div>
    </div>
</template>

<script setup>
/**
 * 步骤条-长方形带箭头且含有背景样式
 * @param {Array} arrs 步骤数组
 * @param {Number} active 当前步骤
 * arrs:[{
 *     text:'',
 *     steps:0, // 表示步骤,0表示第一步
 * },{
 *     text:'',
 *     steps:1, // 表示第二步
 * }]
 */
const props = defineProps({
    arrs: {
        type: Array,
        default() {
            return []
        },
    },
    active: {
        type: Number,
        default: 0,
    },
})

const emits = defineEmits(["click"])
const onClick = (item, index) => {
    emits("click", item, index)
}
</script>

<style lang="less" scoped>
.steps {
    overflow: hidden;
    width: 100%;
    line-height: 1.5;
    font-size: 0;
    display: flex;
    margin-bottom: 20px;
    .steps-item {
        flex: 1;
        padding: 0 8px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        overflow: visible;
        &.is-active {
            .steps-item-sub {
                background-color: @themes;
                color: #fff;
                &::after {
                    border-left-color: @themes;
                }
                &::before {
                    border-bottom-color: @themes;
                    border-top-color: @themes;
                }
            }
        }
        &:first-child {
            padding-left: 0;
            .steps-item-sub::before {
                display: none;
            }
        }
        &:last-child {
            padding-right: 0;
            .steps-item-sub::after {
                display: none;
            }
            &.is-active {
                .steps-item-sub {
                    &::before {
                        border-bottom-color: @themes;
                        border-top-color: @themes;
                    }
                }
            }
        }
        .steps-item-sub {
            height: 42px;
            line-height: 42px;
            font-size: 14px;
            text-align: center;
            padding: 0 10px;
            color: #323233;
            background-color: #f2f3f5;
            position: relative;
            &::after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 24px solid transparent;
                border-bottom: 24px solid transparent;
                border-left: 12px solid #f2f3f5;
                position: absolute;
                top: 50%;
                margin-top: -24px;
                right: -12px;
            }
            &::before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 24px solid #f2f3f5;
                border-bottom: 24px solid #f2f3f5;
                border-left: 12px solid transparent;
                position: absolute;
                top: 50%;
                margin-top: -24px;
                left: -12px;
            }
        }
    }
}
</style>